<html>
    <head>
        <meta charset="utf-8">
        <title>GeoServer WMTS图层(QuadServer)</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>
        <script type="text/javascript" src="../lib/leaflet-tilelayer-wmts-quadserver.js"></script>
        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>

        <script type="text/javascript">
            var map = null; 

            function init(){

                var crs = new L.CRS.EPSG4326();

                map = L.map("mapDiv", { 
                    crs:L.CRS.EPSG4326,
                    center: [0,0],
                    // center: [39,116],
                    zoom: 1,
                });

                //加载TMS协议的瓦片图层
                // L.tileLayer( 
                //     'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                // ).addTo(map);
                
                var url = "http://127.0.0.1/QuadServer/services/maps/wmts100";

                var ign = new L.TileLayer.WMTSQuadServer( url ,
                               {
                                   layer: "world_image",
                                   style: "Default",
                                   tilematrixSet: "PGIS_TILE_STORE",
                                   format: "image/jpeg"
                               }
                              );
                ign.addTo(map);

                map.on('mousemove', function(ev) {
                    //在文本框中显示坐标
                    document.getElementById("X").value = ev.latlng.lng;
                    document.getElementById("Y").value = ev.latlng.lat;
                });

            }
        </script>
            
    </head>
    <body onload="init()">
        <span>坐标：</span>
        <input id="X" type="text" value="0.0" size='20'>
        -
        <input id="Y" type="text" value="0.0" size='20'>
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>